<template>
  <el-dialog title="编辑信息" :visible.sync="visible">
    <el-form
      :model="userForm"
      :rules="rules"
      ref="ruleForm"
      label-width="65px"
      class="demo-ruleForm"
      label-position="right"
    >
      <el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :auto-upload="false"
        :on-change="imgChange"
      >
        <img v-if="avatar" :src="avatar" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <el-form-item label="用户名" prop="mg_name">
        <el-input v-model="userForm.mg_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="mg_email">
        <el-input v-model="userForm.mg_email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mg_mobile">
        <el-input v-model="userForm.mg_mobile"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="edit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "DialogEditUser",
  data() {
    return {
      visible: false,
      userForm: {
        mg_id: 0,
        mg_name: "",
        mg_email: "",
        mg_mobile: "",
        mg_avatar: "",
      },
      avatar: "",
      rules: {
        mg_email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱格式",
            trigger: "blur",
          },
        ],
        mg_mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: "请输入正确的号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.$bus.$on("visibleEditUserVisible", ({ row, flag }) => {
      Object.assign(this.userForm, this.$options.data().userForm);
      //如果有头像的
      if (row.mg_avatar !== "") this.avatar = row.mg_avatar;
      this.userForm.mg_email = row.mg_email;
      this.userForm.mg_mobile = row.mg_mobile;
      this.userForm.mg_id = row.mg_id;
      this.userForm.mg_name = row.mg_name;
      this.visible = flag;
    });
  },
  methods: {
    ...mapActions("userStore", ["get_user_list", "update_user_info"]),
    imgChange(file, fileList) {
      // console.log(file.raw.type);
      const ImgForm =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt2M = file.raw.size < 1024 * 1024 * 2; //小于2M

      if (!ImgForm)
        return this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      if (!isLt2M) return this.$message.error("上传头像图片大小不能超过 2MB !");

      //得到本地图像(详细见md)
      this.avatar = URL.createObjectURL(file.raw);
      this.userForm.mg_avatar = file.raw;
    },
    edit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          //将userForm数据替换到对应的store（对应mg_id）
          Object.keys(this.$store.state.userStore.userList).some((key) => {
            if (
              this.$store.state.userStore.userList[key].mg_id ===
              this.userForm.mg_id
            ) {
              //找到了替换数值
              this.$store.state.userStore.userList[key] = {
                ...this.$store.state.userStore.userList[key],
                ...this.userForm,
              };
              //   console.log(this.$store.state.userStore.userList[key]);
              return true;
            }
          });
          //   进行更新(头像需要换一下 后端需要更改)
          this.update_user_info({
            mg_id: this.userForm.mg_id,
            isFormData: true,
          });
          //刷新列表
          setTimeout(() => {
            this.get_user_list();
          }, 200);
          //隐藏dialog
          this.visible = false;
        }
      });
    },
  },
};
</script>

<style  scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px 0;
}
.avatar-uploader {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 150px !important;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border: 1px dashed #c6c2c2;
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 128px;
  height: 128px;
  display: block;
}
</style>
